<template>
    <div>
        <el-button type="text" icon="el-icon-back" size="mini" @click="back">返回</el-button>
        <div class="tip">规则信息添加</div>

        <el-form ref="form" :model="remindForm" label-width="150px">
            <el-form-item label="当前状态" required>
                <el-switch v-model="switchRemind" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </el-form-item>
            <el-form-item label="接受通知管理员" required>
                <el-button type="primary" @click="selectMemberVisible = true">+ 添加管理员</el-button>
            </el-form-item>
            <el-form-item>
                <el-tag v-for="tag in remindForm.emp" :key="tag.empName" closable @close="closeTagHandle(tag)"
                        style="margin-right: 10px"> {{ tag.empName }}
                </el-tag>
            </el-form-item>
            <el-form-item label="通知频率">
                <el-radio v-model="remindForm.triggerFrequency" label="1">每次通知</el-radio>
                <el-radio v-model="remindForm.triggerFrequency" label="2">每天通知一次（每日早上8点左右定时推送）</el-radio>
            </el-form-item>
        </el-form>

        <div class="button-strip">
            <el-button type="primary" @click="submit">设置</el-button>
            <el-divider direction="vertical" content-position="center"></el-divider>
            <el-button plain @click="back">返回</el-button>
        </div>

        <el-dialog title="选择管理员" :visible.sync="selectMemberVisible" width="60%" :close-on-click-modal="false"
                   :destroy-on-close="true">
            <List_multiple_select ref="selectMember" :listFields="listFields" :dataSource="memberList" type="filter"/>
            <span slot="footer" class="dialog-footer">
                <el-button @click="selectMemberVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitMember">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import List_multiple_select from "@/components/list_multiple_select/list_multiple_select";

    export default {
        name: "illegal_remind_set_up",
        components: {List_multiple_select},
        props: {
            infraction: {
                type: Object,
                default() {
                    return {}
                }
            }
        },
        data() {
            return {
                selectMemberVisible: false,
                switchRemind: false,
                memberList: [],
                listFields: {
                    empName: '名称'
                },
                emp: [],
                remindForm: {},
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init(){
                this.remindForm = this.infraction
                this.remindForm.emp = this.infraction.emp == null ? [] : this.infraction.emp
                this.switchRemind = this.remindForm.infractionAlertStatus == '1'? true : false
                this.getEmp()
            },
            getEmp(){
                let that = this
                this.$request('/api/emp/getAllEmp/1_0', {}, 'POST').then((data) => {
                    that.memberList = data.rows;

                })
            },
            back() {
                this.$emit("currentHandle", 'list')
            },
            submit() {
                let that = this
                this.remindForm.infractionAlertStatus = that.switchRemind ? '1' : '0'
                this.$request('/api/infraction/update/1_0', this.remindForm, 'POST').then((data) => {
                    that.$emit("currentHandle", 'list')
                })
            },
            closeTagHandle(tag) {
                this.remindForm.emp.splice(this.remindForm.emp.indexOf(tag), 1);
                this.remindForm.empId = ''
                for (let item of this.remindForm.emp){
                    this.remindForm.empId = this.remindForm.empId + item.empId + ','
                }
                this.remindForm.empId = this.remindForm.empId.slice(0,this.remindForm.empId.length-1)
            },
            submitMember() {
                let data = this.$refs.selectMember.getData();
                this.remindForm.emp = [...this.remindForm.emp, ...data]
                this.remindForm.empId = ''
                for (let item of this.remindForm.emp){
                    this.remindForm.empId = this.remindForm.empId + item.empId + ','
                }
                this.remindForm.empId = this.remindForm.empId.slice(0,this.remindForm.empId.length-1)
                this.selectMemberVisible = false
            },
        }
    }
</script>

<style scoped>
    .el-divider--vertical {
        height: 2em;
    }
</style>
